<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>商品管理</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" href="../js/jquery-easyui/themes/bootstrap/easyui.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui/datagrid-detailview.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/jquery.serialize-object.js"></script>
</head>
<body style="padding: 0;margin: 0;position:relative;">
<div style="height:100%;width:100%;" class="easyui-layout" fit='true'>
    <div  region="center" style="width:100%" class="easyui-layout"   title="商品管理" border="false">
        <div region='north' id="tb" style="width: 30%; height: 45px;" >
            <table style="margin-left:10px;float:left;height:45px;width: 100%;" cellspacing="0" border="0" >
                <tr >
                    <td>
                        <form id="search_form">
                            <!--商品名称：<input name="sProductName" style="width:150px;" class="easyui-textbox" />
                            <a href="#" class="easyui-linkbutton search" iconCls="icon-search" onclick="query()">查询</a>-->
                            <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" onclick="update()">修改</a>
                            <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" onclick="delDate()">删除</a>
                        </form>
                    </td>
                </tr>
            </table>
        </div>
        <table region='center' style="height: auto;max-height: 100%" id="listgrid" class='easyui-datagrid'  iconCls="icon-edit" toolbar="#tb"
               data-options="
               url:'/getCasesList',
               fit:true,
               pagination:true,
               rownumbers:true,
               singleSelect:true,
               fitColumns:true,
               showFooter:true,
               columns:[[
                {field:'id',title:'编码',width:120},
                {field:'caseName',title:'案例名称',width:150},
                {field:'caseName_en',title:'案例名称(英文)',width:150},
                {field:'seoTitle',title:'SEO标题',width:120},
                {field:'seoKeyword',title:'SEO关键字',width:120},
                {field:'seoDescs',title:'SEO描述',width:120},
                {field:'createtime',title:'创建时间',width:120},

        ]]
        "></table>
    </div>
</div>

<!-- 修改-->
<div id="edit_dialog" class="easyui-dialog"  closed="true" modal="true" style="width: 908px; padding: 10px;">
    <form id="edit_form" method="post">
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="id" style="width: 100%;"
                   data-options="label:'编码:'" required="required" readonly="readonly">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="caseName" style="width: 100%;"
                   data-options="label:'案例名称:'" required="required">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="caseName_en" style="width: 100%;"
                   data-options="label:'案例名称(英文):'" required="required">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="seoTitle" style="width: 100%;"
                   data-options="label:'SEO标题:'" required="required">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="seoKeyword" style="width: 100%;"
                   data-options="label:'SEO关键字:'" required="required">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="seoDescs" style="width: 100%;"
                   data-options="label:'SEO描述:'" required="required">
        </div>
    </form>

    <div style="text-align: center; padding-bottom: 10px;padding-top: 15px;">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           style="width: 80px; height: 30px" onclick="updateSubmit()">提交</a>
    </div>
</div>

<script type="text/javascript">

    //  查找
    function query(){
        $('#listgrid').datagrid('load',$('#search_form').serializeObject());
    }

    //添加
    function add(){
        $("#add_dialog").dialog("open").dialog("center").dialog("setTitle", "新增");
        $("#add_form").form("clear");
        $('#add_form_select_nEnable').combobox('select', '1');
    }

    //打开修改窗口
    function update() {
        $("#edit_form").form("clear");
        var row = $("#listgrid").datagrid("getSelected");
        if (row) {
            $("#edit_form").form("load", row);
            $("#edit_dialog").dialog("open").dialog("center").dialog("setTitle", "修改");
        } else {
            $.messager.show({
                title:'',
                msg:'请选择要修改的记录行',
                showType:'fade',
                timeout: 1000,
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
    }

    //删除
    function delDate() {
        $("#edit_form").form("clear");
        var row = $("#listgrid").datagrid("getSelected");
        if (row) {
            $.ajax({
                type: "post",
                url: "delCases",
                async: true,
                data: {
                    id:row.id
                },
                success: function(data) {
                    data = JSON.parse(data);
                    if(data.code == 1) {
                        $.messager.show({
                            title:'',
                            msg:data.msg,
                            showType:'fade',
                            timeout: 1500,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        //$('#code').attr("value", data.url);
                        //$('#add_dialog').dialog('close');
                        $("#listgrid").datagrid('options').url= '/getCasesList';
                        $('#listgrid').datagrid('load');
                    } else {
                        alert("删除失败，请联系开发");
                    }
                }
            });
        } else {
            $.messager.show({
                title:'',
                msg:'请选择要修改的记录行',
                showType:'fade',
                timeout: 1000,
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
    }

    //修改提交
    function updateSubmit(){
        $.messager.progress();
        $('#edit_form').form(
            'submit',{
                url:"/changeCasesSeo",
                onSubmit:function(){
                    var isValid = $(this).form('validate');
                    if (!isValid){
                        $.messager.progress('close');
                    }
                    return isValid;
                },
                success:function(result){
                    $.messager.progress('close');
                    var data = JSON.parse(result);
                    if (data.code == 1){
                        $.messager.show({
                            title:'',
                            msg:data.msg,
                            showType:'fade',
                            timeout: 1000,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        $('#edit_dialog').dialog('close');
                        $("#listgrid").datagrid("reload");
                    }else{
                        $.messager.alert('修改失败');
                    }
                }
            });
    }

</script>
</body>
</html>